<!--<template>-->
<!--  <div class="like-comment-component">-->
<!--    &lt;!&ndash; 点赞区域 &ndash;&gt;-->
<!--    <div class="like-section">-->
<!--      <button -->
<!--        :class="['like-btn', { 'liked': isLiked }]"-->
<!--        @click="toggleLike"-->
<!--        :disabled="loading"-->
<!--      >-->
<!--        <i :class="isLiked ? 'fas fa-heart' : 'far fa-heart'"></i>-->
<!--        <span>{{ likeCount }}</span>-->
<!--      </button>-->
<!--      -->
<!--      &lt;!&ndash; 最新点赞用户头像列表 &ndash;&gt;-->
<!--      <div class="latest-like-users" v-if="latestLikeUsers.length > 0">-->
<!--        <img -->
<!--          v-for="user in latestLikeUsers" -->
<!--          :key="user.userId"-->
<!--          :src="user.userAvatar || '/default_avatar.svg'"-->
<!--          :alt="user.userNickname"-->
<!--          :title="user.userNickname"-->
<!--          class="user-avatar"-->
<!--        />-->
<!--      </div>-->
<!--    </div>-->

<!--    &lt;!&ndash; 评论统计 &ndash;&gt;-->
<!--    <div class="comment-stats">-->
<!--      <span class="comment-count">共 {{ commentCount }} 条评论</span>-->
<!--    </div>-->

<!--    &lt;!&ndash; 添加评论 &ndash;&gt;-->
<!--    <div class="add-comment-section">-->
<!--      <div class="comment-input-area">-->
<!--        <textarea -->
<!--          v-model="newComment"-->
<!--          placeholder="写下你的评论..."-->
<!--          class="comment-input"-->
<!--          :disabled="loading"-->
<!--          @keydown.ctrl.enter="addComment"-->
<!--        ></textarea>-->
<!--        <button -->
<!--          @click="addComment"-->
<!--          :disabled="!newComment.trim() || loading"-->
<!--          class="submit-btn"-->
<!--        >-->
<!--          发表评论-->
<!--        </button>-->
<!--      </div>-->
<!--    </div>-->

<!--    &lt;!&ndash; 评论列表 &ndash;&gt;-->
<!--    <div class="comment-list">-->
<!--      <div -->
<!--        v-for="comment in comments" -->
<!--        :key="comment.commentId"-->
<!--        class="comment-item"-->
<!--      >-->
<!--        <div class="comment-header">-->
<!--          <img -->
<!--            :src="comment.userAvatar || '/default_avatar.svg'"-->
<!--            :alt="comment.userNickname"-->
<!--            class="commenter-avatar"-->
<!--          />-->
<!--          <div class="commenter-info">-->
<!--            <span class="commenter-name">{{ comment.userNickname }}</span>-->
<!--            <span class="comment-time">{{ formatTime(comment.createTime) }}</span>-->
<!--          </div>-->
<!--          -->
<!--          &lt;!&ndash; 操作按钮 &ndash;&gt;-->
<!--          <div class="comment-actions" v-if="comment.userId === currentUserId">-->
<!--            <button @click="editComment(comment)" class="edit-btn">编辑</button>-->
<!--            <button @click="deleteComment(comment.commentId)" class="delete-btn">删除</button>-->
<!--          </div>-->
<!--        </div>-->

<!--        <div class="comment-content">-->
<!--          &lt;!&ndash; 显示模式 &ndash;&gt;-->
<!--          <p v-if="!comment.editing">{{ comment.content }}</p>-->
<!--          -->
<!--          &lt;!&ndash; 编辑模式 &ndash;&gt;-->
<!--          <div v-else class="edit-mode">-->
<!--            <textarea -->
<!--              v-model="comment.editContent"-->
<!--              class="edit-textarea"-->
<!--            ></textarea>-->
<!--            <div class="edit-actions">-->
<!--              <button @click="saveEdit(comment)" class="save-btn">保存</button>-->
<!--              <button @click="cancelEdit(comment)" class="cancel-btn">取消</button>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->

<!--        &lt;!&ndash; 回复按钮 &ndash;&gt;-->
<!--        <div class="comment-footer">-->
<!--          <button @click="toggleReply(comment)" class="reply-btn">-->
<!--            回复 ({{ comment.replyCount || 0 }})-->
<!--          </button>-->
<!--        </div>-->

<!--        &lt;!&ndash; 回复列表 &ndash;&gt;-->
<!--        <div v-if="comment.showReplies" class="replies-section">-->
<!--          <div -->
<!--            v-for="reply in comment.replies" -->
<!--            :key="reply.commentId"-->
<!--            class="reply-item"-->
<!--          >-->
<!--            <div class="reply-header">-->
<!--              <img -->
<!--                :src="reply.userAvatar || '/default_avatar.svg'"-->
<!--                :alt="reply.userNickname"-->
<!--                class="replier-avatar"-->
<!--              />-->
<!--              <span class="replier-name">{{ reply.userNickname }}</span>-->
<!--              <span v-if="reply.replyToUserNickname" class="reply-to">-->
<!--                回复 @{{ reply.replyToUserNickname }}-->
<!--              </span>-->
<!--              <span class="reply-time">{{ formatTime(reply.createTime) }}</span>-->
<!--            </div>-->
<!--            <p class="reply-content">{{ reply.content }}</p>-->
<!--          </div>-->
<!--          -->
<!--          &lt;!&ndash; 添加回复 &ndash;&gt;-->
<!--          <div v-if="comment.showReplyInput" class="add-reply">-->
<!--            <textarea -->
<!--              v-model="comment.replyContent"-->
<!--              :placeholder="`回复 @${comment.userNickname}...`"-->
<!--              class="reply-input"-->
<!--            ></textarea>-->
<!--            <div class="reply-actions">-->
<!--              <button @click="addReply(comment)" class="submit-reply-btn">发表回复</button>-->
<!--              <button @click="cancelReply(comment)" class="cancel-reply-btn">取消</button>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->

<!--      &lt;!&ndash; 加载更多 &ndash;&gt;-->
<!--      <div v-if="hasMoreComments" class="load-more">-->
<!--        <button @click="loadMoreComments" :disabled="loading" class="load-more-btn">-->
<!--          {{ loading ? '加载中...' : '加载更多评论' }}-->
<!--        </button>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  name: 'LikeCommentComponent',-->
<!--  props: {-->
<!--    targetId: {-->
<!--      type: Number,-->
<!--      required: true-->
<!--    },-->
<!--    targetType: {-->
<!--      type: Number,-->
<!--      required: true-->
<!--    },-->
<!--    currentUserId: {-->
<!--      type: Number,-->
<!--      required: true-->
<!--    }-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      loading: false,-->
<!--      -->
<!--      // 点赞相关-->
<!--      isLiked: false,-->
<!--      likeCount: 0,-->
<!--      latestLikeUsers: [],-->
<!--      -->
<!--      // 评论相关-->
<!--      comments: [],-->
<!--      commentCount: 0,-->
<!--      newComment: '',-->
<!--      currentPage: 1,-->
<!--      hasMoreComments: true,-->
<!--    }-->
<!--  },-->
<!--  mounted() {-->
<!--    this.initData();-->
<!--  },-->
<!--  methods: {-->
<!--    async initData() {-->
<!--      await Promise.all([-->
<!--        this.checkUserLiked(),-->
<!--        this.getLikeCount(),-->
<!--        this.getLatestLikeUsers(),-->
<!--        this.getCommentList(),-->
<!--        this.getCommentCount()-->
<!--      ]);-->
<!--    },-->

<!--    // 点赞相关方法-->
<!--    async toggleLike() {-->
<!--      if (this.loading) return;-->
<!--      -->
<!--      this.loading = true;-->
<!--      try {-->
<!--        const response = await fetch('/api/likes/toggle', {-->
<!--          method: 'POST',-->
<!--          headers: {-->
<!--            'Content-Type': 'application/json',-->
<!--            'userId': this.currentUserId.toString()-->
<!--          },-->
<!--          body: JSON.stringify({-->
<!--            targetId: this.targetId,-->
<!--            targetType: this.targetType-->
<!--          })-->
<!--        });-->
<!--        -->
<!--        const result = await response.json();-->
<!--        if (result.success) {-->
<!--          this.isLiked = result.data.isLiked;-->
<!--          this.likeCount = result.data.likeCount;-->
<!--          -->
<!--          // 刷新最新点赞用户列表-->
<!--          await this.getLatestLikeUsers();-->
<!--          -->
<!--          this.$emit('likeChanged', {-->
<!--            isLiked: this.isLiked,-->
<!--            likeCount: this.likeCount-->
<!--          });-->
<!--        }-->
<!--      } catch (error) {-->
<!--        console.error('点赞操作失败:', error);-->
<!--      } finally {-->
<!--        this.loading = false;-->
<!--      }-->
<!--    },-->

<!--    async checkUserLiked() {-->
<!--      try {-->
<!--        const response = await fetch(-->
<!--          `/api/likes/check?targetId=${this.targetId}&targetType=${this.targetType}`,-->
<!--          {-->
<!--            headers: {-->
<!--              'userId': this.currentUserId.toString()-->
<!--            }-->
<!--          }-->
<!--        );-->
<!--        const result = await response.json();-->
<!--        if (result.success) {-->
<!--          this.isLiked = result.data;-->
<!--        }-->
<!--      } catch (error) {-->
<!--        console.error('检查点赞状态失败:', error);-->
<!--      }-->
<!--    },-->

<!--    async getLikeCount() {-->
<!--      try {-->
<!--        const response = await fetch(-->
<!--          `/api/likes/count?targetId=${this.targetId}&targetType=${this.targetType}`-->
<!--        );-->
<!--        const result = await response.json();-->
<!--        if (result.success) {-->
<!--          this.likeCount = result.data;-->
<!--        }-->
<!--      } catch (error) {-->
<!--        console.error('获取点赞数失败:', error);-->
<!--      }-->
<!--    },-->

<!--    async getLatestLikeUsers() {-->
<!--      try {-->
<!--        const response = await fetch(-->
<!--          `/api/likes/latest?targetId=${this.targetId}&targetType=${this.targetType}&limit=5`-->
<!--        );-->
<!--        const result = await response.json();-->
<!--        if (result.success) {-->
<!--          this.latestLikeUsers = result.data;-->
<!--        }-->
<!--      } catch (error) {-->
<!--        console.error('获取最新点赞用户失败:', error);-->
<!--      }-->
<!--    },-->

<!--    // 评论相关方法-->
<!--    async addComment() {-->
<!--      if (!this.newComment.trim() || this.loading) return;-->
<!--      -->
<!--      this.loading = true;-->
<!--      try {-->
<!--        const response = await fetch('/api/comments', {-->
<!--          method: 'POST',-->
<!--          headers: {-->
<!--            'Content-Type': 'application/json',-->
<!--            'userId': this.currentUserId.toString()-->
<!--          },-->
<!--          body: JSON.stringify({-->
<!--            targetId: this.targetId,-->
<!--            targetType: this.targetType,-->
<!--            content: this.newComment.trim()-->
<!--          })-->
<!--        });-->
<!--        -->
<!--        const result = await response.json();-->
<!--        if (result.success) {-->
<!--          this.newComment = '';-->
<!--          this.currentPage = 1;-->
<!--          await this.getCommentList(true);-->
<!--          await this.getCommentCount();-->
<!--          -->
<!--          this.$emit('commentAdded', result.data);-->
<!--        }-->
<!--      } catch (error) {-->
<!--        console.error('添加评论失败:', error);-->
<!--      } finally {-->
<!--        this.loading = false;-->
<!--      }-->
<!--    },-->

<!--    async getCommentList(refresh = false) {-->
<!--      if (refresh) {-->
<!--        this.comments = [];-->
<!--        this.currentPage = 1;-->
<!--      }-->
<!--      -->
<!--      try {-->
<!--        const response = await fetch(-->
<!--          `/api/comments?targetId=${this.targetId}&targetType=${this.targetType}&pageNum=${this.currentPage}&pageSize=10`-->
<!--        );-->
<!--        const result = await response.json();-->
<!--        if (result.success) {-->
<!--          if (refresh) {-->
<!--            this.comments = result.data.records;-->
<!--          } else {-->
<!--            this.comments.push(...result.data.records);-->
<!--          }-->
<!--          this.hasMoreComments = result.data.hasNext;-->
<!--          -->
<!--          // 为每个评论添加控制属性-->
<!--          this.comments.forEach(comment => {-->
<!--            this.$set(comment, 'editing', false);-->
<!--            this.$set(comment, 'editContent', comment.content);-->
<!--            this.$set(comment, 'showReplies', false);-->
<!--            this.$set(comment, 'showReplyInput', false);-->
<!--            this.$set(comment, 'replyContent', '');-->
<!--            this.$set(comment, 'replies', []);-->
<!--          });-->
<!--        }-->
<!--      } catch (error) {-->
<!--        console.error('获取评论列表失败:', error);-->
<!--      }-->
<!--    },-->

<!--    async getCommentCount() {-->
<!--      try {-->
<!--        const response = await fetch(-->
<!--          `/api/comments/count?targetId=${this.targetId}&targetType=${this.targetType}`-->
<!--        );-->
<!--        const result = await response.json();-->
<!--        if (result.success) {-->
<!--          this.commentCount = result.data;-->
<!--        }-->
<!--      } catch (error) {-->
<!--        console.error('获取评论数量失败:', error);-->
<!--      }-->
<!--    },-->

<!--    async loadMoreComments() {-->
<!--      if (this.loading || !this.hasMoreComments) return;-->
<!--      -->
<!--      this.currentPage++;-->
<!--      await this.getCommentList();-->
<!--    },-->

<!--    async deleteComment(commentId) {-->
<!--      if (!confirm('确定要删除这条评论吗？')) return;-->
<!--      -->
<!--      try {-->
<!--        const response = await fetch(`/api/comments/${commentId}`, {-->
<!--          method: 'DELETE',-->
<!--          headers: {-->
<!--            'userId': this.currentUserId.toString()-->
<!--          }-->
<!--        });-->
<!--        -->
<!--        const result = await response.json();-->
<!--        if (result.success) {-->
<!--          this.comments = this.comments.filter(c => c.commentId !== commentId);-->
<!--          this.commentCount&#45;&#45;;-->
<!--          this.$emit('commentDeleted', commentId);-->
<!--        }-->
<!--      } catch (error) {-->
<!--        console.error('删除评论失败:', error);-->
<!--      }-->
<!--    },-->

<!--    editComment(comment) {-->
<!--      comment.editing = true;-->
<!--      comment.editContent = comment.content;-->
<!--    },-->

<!--    async saveEdit(comment) {-->
<!--      if (!comment.editContent.trim()) return;-->
<!--      -->
<!--      try {-->
<!--        const response = await fetch(-->
<!--          `/api/comments/${comment.commentId}?content=${encodeURIComponent(comment.editContent)}`,-->
<!--          {-->
<!--            method: 'PUT',-->
<!--            headers: {-->
<!--              'userId': this.currentUserId.toString()-->
<!--            }-->
<!--          }-->
<!--        );-->
<!--        -->
<!--        const result = await response.json();-->
<!--        if (result.success) {-->
<!--          comment.content = comment.editContent;-->
<!--          comment.editing = false;-->
<!--          this.$emit('commentUpdated', comment);-->
<!--        }-->
<!--      } catch (error) {-->
<!--        console.error('更新评论失败:', error);-->
<!--      }-->
<!--    },-->

<!--    cancelEdit(comment) {-->
<!--      comment.editing = false;-->
<!--      comment.editContent = comment.content;-->
<!--    },-->

<!--    async toggleReply(comment) {-->
<!--      comment.showReplies = !comment.showReplies;-->
<!--      -->
<!--      if (comment.showReplies && comment.replies.length === 0) {-->
<!--        // 加载回复列表-->
<!--        try {-->
<!--          const response = await fetch(`/api/comments/${comment.commentId}/replies`);-->
<!--          const result = await response.json();-->
<!--          if (result.success) {-->
<!--            comment.replies = result.data;-->
<!--          }-->
<!--        } catch (error) {-->
<!--          console.error('获取回复列表失败:', error);-->
<!--        }-->
<!--      }-->
<!--      -->
<!--      comment.showReplyInput = comment.showReplies;-->
<!--    },-->

<!--    async addReply(comment) {-->
<!--      if (!comment.replyContent.trim()) return;-->
<!--      -->
<!--      try {-->
<!--        const response = await fetch('/api/comments', {-->
<!--          method: 'POST',-->
<!--          headers: {-->
<!--            'Content-Type': 'application/json',-->
<!--            'userId': this.currentUserId.toString()-->
<!--          },-->
<!--          body: JSON.stringify({-->
<!--            targetId: this.targetId,-->
<!--            targetType: this.targetType,-->
<!--            content: comment.replyContent.trim(),-->
<!--            parentId: comment.commentId,-->
<!--            replyToUserId: comment.userId-->
<!--          })-->
<!--        });-->
<!--        -->
<!--        const result = await response.json();-->
<!--        if (result.success) {-->
<!--          comment.replyContent = '';-->
<!--          comment.showReplyInput = false;-->
<!--          -->
<!--          // 重新加载回复列表-->
<!--          const repliesResponse = await fetch(`/api/comments/${comment.commentId}/replies`);-->
<!--          const repliesResult = await repliesResponse.json();-->
<!--          if (repliesResult.success) {-->
<!--            comment.replies = repliesResult.data;-->
<!--            comment.replyCount = repliesResult.data.length;-->
<!--          }-->
<!--          -->
<!--          this.$emit('replyAdded', result.data);-->
<!--        }-->
<!--      } catch (error) {-->
<!--        console.error('添加回复失败:', error);-->
<!--      }-->
<!--    },-->

<!--    cancelReply(comment) {-->
<!--      comment.showReplyInput = false;-->
<!--      comment.replyContent = '';-->
<!--    },-->

<!--    formatTime(timeString) {-->
<!--      const time = new Date(timeString);-->
<!--      const now = new Date();-->
<!--      const diff = now - time;-->
<!--      const minutes = Math.floor(diff / 60000);-->
<!--      const hours = Math.floor(diff / 3600000);-->
<!--      const days = Math.floor(diff / 86400000);-->
<!--      -->
<!--      if (days > 0) {-->
<!--        return `${days}天前`;-->
<!--      } else if (hours > 0) {-->
<!--        return `${hours}小时前`;-->
<!--      } else if (minutes > 0) {-->
<!--        return `${minutes}分钟前`;-->
<!--      } else {-->
<!--        return '刚刚';-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->
<!--.like-comment-component {-->
<!--  max-width: 600px;-->
<!--  margin: 0 auto;-->
<!--  padding: 16px;-->
<!--}-->

<!--/* 点赞区域样式 */-->
<!--.like-section {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  margin-bottom: 16px;-->
<!--}-->

<!--.like-btn {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  gap: 8px;-->
<!--  padding: 8px 16px;-->
<!--  border: 1px solid #ddd;-->
<!--  border-radius: 20px;-->
<!--  background: white;-->
<!--  cursor: pointer;-->
<!--  transition: all 0.3s;-->
<!--}-->

<!--.like-btn:hover {-->
<!--  background: #f5f5f5;-->
<!--}-->

<!--.like-btn.liked {-->
<!--  color: #ff4757;-->
<!--  border-color: #ff4757;-->
<!--  background: #fff5f5;-->
<!--}-->

<!--.latest-like-users {-->
<!--  display: flex;-->
<!--  margin-left: 16px;-->
<!--}-->

<!--.user-avatar {-->
<!--  width: 24px;-->
<!--  height: 24px;-->
<!--  border-radius: 50%;-->
<!--  margin-left: -8px;-->
<!--  border: 2px solid white;-->
<!--}-->

<!--/* 评论样式 */-->
<!--.comment-stats {-->
<!--  margin-bottom: 16px;-->
<!--  color: #666;-->
<!--}-->

<!--.add-comment-section {-->
<!--  margin-bottom: 24px;-->
<!--}-->

<!--.comment-input-area {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  gap: 12px;-->
<!--}-->

<!--.comment-input {-->
<!--  min-height: 80px;-->
<!--  padding: 12px;-->
<!--  border: 1px solid #ddd;-->
<!--  border-radius: 8px;-->
<!--  resize: vertical;-->
<!--}-->

<!--.submit-btn {-->
<!--  align-self: flex-end;-->
<!--  padding: 8px 24px;-->
<!--  background: #007bff;-->
<!--  color: white;-->
<!--  border: none;-->
<!--  border-radius: 4px;-->
<!--  cursor: pointer;-->
<!--}-->

<!--.submit-btn:disabled {-->
<!--  background: #ccc;-->
<!--  cursor: not-allowed;-->
<!--}-->

<!--/* 评论列表样式 */-->
<!--.comment-item {-->
<!--  border-bottom: 1px solid #eee;-->
<!--  padding: 16px 0;-->
<!--}-->

<!--.comment-header {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  margin-bottom: 8px;-->
<!--}-->

<!--.commenter-avatar {-->
<!--  width: 32px;-->
<!--  height: 32px;-->
<!--  border-radius: 50%;-->
<!--  margin-right: 12px;-->
<!--}-->

<!--.commenter-info {-->
<!--  flex: 1;-->
<!--}-->

<!--.commenter-name {-->
<!--  font-weight: bold;-->
<!--  margin-right: 12px;-->
<!--}-->

<!--.comment-time {-->
<!--  color: #666;-->
<!--  font-size: 12px;-->
<!--}-->

<!--.comment-actions {-->
<!--  display: flex;-->
<!--  gap: 8px;-->
<!--}-->

<!--.edit-btn, .delete-btn {-->
<!--  padding: 4px 8px;-->
<!--  border: none;-->
<!--  background: none;-->
<!--  color: #666;-->
<!--  cursor: pointer;-->
<!--  font-size: 12px;-->
<!--}-->

<!--.edit-btn:hover {-->
<!--  color: #007bff;-->
<!--}-->

<!--.delete-btn:hover {-->
<!--  color: #ff4757;-->
<!--}-->

<!--.comment-content {-->
<!--  margin-bottom: 8px;-->
<!--  line-height: 1.5;-->
<!--}-->

<!--.edit-textarea {-->
<!--  width: 100%;-->
<!--  min-height: 60px;-->
<!--  padding: 8px;-->
<!--  border: 1px solid #ddd;-->
<!--  border-radius: 4px;-->
<!--  resize: vertical;-->
<!--}-->

<!--.edit-actions {-->
<!--  display: flex;-->
<!--  gap: 8px;-->
<!--  margin-top: 8px;-->
<!--}-->

<!--.save-btn, .cancel-btn {-->
<!--  padding: 4px 12px;-->
<!--  border: none;-->
<!--  border-radius: 4px;-->
<!--  cursor: pointer;-->
<!--  font-size: 12px;-->
<!--}-->

<!--.save-btn {-->
<!--  background: #007bff;-->
<!--  color: white;-->
<!--}-->

<!--.cancel-btn {-->
<!--  background: #6c757d;-->
<!--  color: white;-->
<!--}-->

<!--.comment-footer {-->
<!--  display: flex;-->
<!--  gap: 16px;-->
<!--}-->

<!--.reply-btn {-->
<!--  padding: 4px 8px;-->
<!--  border: none;-->
<!--  background: none;-->
<!--  color: #666;-->
<!--  cursor: pointer;-->
<!--  font-size: 12px;-->
<!--}-->

<!--.reply-btn:hover {-->
<!--  color: #007bff;-->
<!--}-->

<!--/* 回复样式 */-->
<!--.replies-section {-->
<!--  margin-left: 32px;-->
<!--  margin-top: 12px;-->
<!--  border-left: 2px solid #eee;-->
<!--  padding-left: 16px;-->
<!--}-->

<!--.reply-item {-->
<!--  margin-bottom: 12px;-->
<!--}-->

<!--.reply-header {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  margin-bottom: 4px;-->
<!--  font-size: 12px;-->
<!--}-->

<!--.replier-avatar {-->
<!--  width: 20px;-->
<!--  height: 20px;-->
<!--  border-radius: 50%;-->
<!--  margin-right: 8px;-->
<!--}-->

<!--.replier-name {-->
<!--  font-weight: bold;-->
<!--  margin-right: 8px;-->
<!--}-->

<!--.reply-to {-->
<!--  color: #007bff;-->
<!--  margin-right: 8px;-->
<!--}-->

<!--.reply-time {-->
<!--  color: #666;-->
<!--}-->

<!--.reply-content {-->
<!--  font-size: 14px;-->
<!--  line-height: 1.4;-->
<!--  margin: 0;-->
<!--}-->

<!--.add-reply {-->
<!--  margin-top: 12px;-->
<!--}-->

<!--.reply-input {-->
<!--  width: 100%;-->
<!--  min-height: 60px;-->
<!--  padding: 8px;-->
<!--  border: 1px solid #ddd;-->
<!--  border-radius: 4px;-->
<!--  resize: vertical;-->
<!--  font-size: 14px;-->
<!--}-->

<!--.reply-actions {-->
<!--  display: flex;-->
<!--  gap: 8px;-->
<!--  margin-top: 8px;-->
<!--}-->

<!--.submit-reply-btn, .cancel-reply-btn {-->
<!--  padding: 4px 12px;-->
<!--  border: none;-->
<!--  border-radius: 4px;-->
<!--  cursor: pointer;-->
<!--  font-size: 12px;-->
<!--}-->

<!--.submit-reply-btn {-->
<!--  background: #007bff;-->
<!--  color: white;-->
<!--}-->

<!--.cancel-reply-btn {-->
<!--  background: #6c757d;-->
<!--  color: white;-->
<!--}-->

<!--/* 加载更多样式 */-->
<!--.load-more {-->
<!--  text-align: center;-->
<!--  margin-top: 24px;-->
<!--}-->

<!--.load-more-btn {-->
<!--  padding: 8px 24px;-->
<!--  border: 1px solid #ddd;-->
<!--  background: white;-->
<!--  border-radius: 4px;-->
<!--  cursor: pointer;-->
<!--}-->

<!--.load-more-btn:hover {-->
<!--  background: #f5f5f5;-->
<!--}-->

<!--.load-more-btn:disabled {-->
<!--  background: #f5f5f5;-->
<!--  cursor: not-allowed;-->
<!--}-->
<!--</style>-->
